Adding Line Numbers!

Version 3 of Eddie includes line numbers in the left margin. Have a look:

The line numbers are added with native Liberty BASIC commands, too! You need Liberty BASIC version 4.02 for this feature to work, because the ORIGIN? command is broken in version 4.01.

The origin?

Font Face

A code editor should use a mono-spaced font. This means that each character takes the same space (width). A variable-width font allows large characters, such as uppercase 'M' to take up more space than small characters, such as lowercase 'i'. Because it is easier to read code that lines up in columns, code editors use mono-spaced fonts such as Courier New. The line numbers in the margin also need to line up, so a mono-spaced font is right for that purpose as well.

Remember this important rule. When you give a FONT command in Liberty BASIC, the face name must be all one word. If you are using a font such as "Courier New", you must replace any blank spaces with underscore characters, like this: "Courier_New". Font facename designations are not case sensitive.

Font Size

To keep the line numbers in the margin in sync with the rows of text, we need to use fonts that are the same size in the texteditor and the graphicbox that serves as the line number margin. There are two ways to set the size of fonts in Liberty BASIC. We can set the size in pixels, or in points. Pixels are the discreet, smallest elements of the graphical screen. Points refer to the actual size that a font appears on the screen, as measured by a ruler. A 10 point font appears the same size on all screen resolutions. A font that is 10 pixels high appears quite large if you set your resolution to 640x480, but it looks much smaller if the same monitor is set to 1024x768.

The FONT command requires a font facename, and a size. Here is a font command that creates a font in the face, Arial, that is 10 points in size:

#handle "!font arial 10"

How does Liberty BASIC know that the "10" refers to points? It knows because there is only one number given in the size specification argument. If there are two numbers in that argument, Liberty BASIC sizes the font in pixels. To create an Arial font that is 16 pixels high:

#handle "!font arial 8 16"

There are two numbers in the size argument. The first refers to the width, the second to the height of the font in pixels. That command creates a font whose average character is 8 pixels in width and 16 pixels in height. To allow Windows to use the default height for a font, use "0" as the width specification:

#handle "!font arial 0 16"

Controls that can accept new strings of text require the exclamation point character to precede the FONT command, so that they know it is a command, not a new caption or string of text to display. A texteditor requires the '!' character in the command, while a graphicbox does not.

Eddie uses these font commands to set the font in the texteditor and in the graphicbox that serves as the line number margin:

    'set a custom font for the texteditor
    #1.te "!font courier_new 0 16"
    'set up the graphicbox
    #1.g "down; fill Buttonface; backcolor buttonface; flush"
    'use the same font as the texteditor
    #1.g "font courier_new 0 16"

Graphics Text

Control Placement and Autoresizing

The Timer

The timer is crucial to the line number feature in Eddie. We need to check the row at the origin periodically, to see if the line numbers in the margin need to be updated. We do this check using a TIMER. The timer statement looks like this:

    timer ms, [branchLabel]

The first argument is the number of milliseconds for the timer interval. There are 1000 milliseconds in one second. If the number "1000" were used, the timer would fire once per second. If the number was "500", the timer would fire once each half second. 250 milliseconds is a quarter second, and so on. The branch label specified in the timer statement is accessed each time the timer fires an event. The code in Eddie to activate the timer:

     TIMER 50, [activateTimer]

We'll want to turn the timer off when a long routine is executing in the program. We turn off the timer by setting the time interval to 0, and omitting the branch label designation:

    TIMER 0

There is only one timer available to a Liberty BASIC program. It can be turned on or off as many times as needed. The timer interval can be changed at any time as well.

Making it Work

Here's how Eddie implements scrolling line numbers in the left margin.

• Check the current row at the origin.
• If the row hasn't changed since the last check, do nothing.
• If the row is different than it was at the last check:
  • Turn off the timer.
  • Store the number of the row in a variable called "lastRow".
  • Delete the previous drawing segment to release its memory.
  • Place the pen at the top of the graphicbox, ready to print numbers.
  • Fill the graphicbox with buttonface color to remove old line numbers.
  • Print line numbers in a for/next loop, starting with the row number at the origin.
  • Flush the graphics and give the flushed segment a name so that it can be deleted the next time.
  • Turn on the timer.

We've already discussed most of the routines to accomplish the line number scroll, but there are a few more to mention.

We know how to check for the row at the origin. If we store that value in a variable, the next time we check the origin, we can compare the two and see if there is a change. If the user hasn't scrolled the texteditor, there is no need to update the line numbers in the margin. If the row at the orgin has changed, we place that value into the "lastRow" variable, and go on with the line number update. Here's the code:

     #1.te "!origin? col row"
     'if it is the same as last check, do nothing
     if row = lastRow then wait
    'turn off timer for this routine
     TIMER 0
     'new lastRow is current row, for next check
     lastRow = row

We need to issue a FLUSH command to ensure that the graphic line numbers persist if the window is obscured. Each FLUSH consumes memory. We can release that memory with DELSEGMENT. If we use the optional ability to give a name to a drawing segment when we FLUSH, we can easily delete that segment when it is time to update the graphic line numbers. Here's how Eddie does it:

     #1.g "delsegment linenums"
     'code to update graphics
     'more code
     'more code
     'flush and give this segment the name *linenums*
     #1.g "flush linenums"

All that's left is to write the graphics text to print the row numbers. We can do that quite easily in a for/next loop. The counter variable is used in the printing of the line numbers. The counter variable starts with the value of the row at the origin, which is in the variable "row". We want the numbers to line up in columns, so we create a string with each number with the USING() function, as described above. Each new number in the loop is printed with a carriage return (the "\" character used for graphics text.) We start the printing at the current "row" value and print numbers in a loop until we get to the row value plus 100. It is unlikely that 100 lines will ever be displayed at one time in the texteditor visible portion, so we've used that number as our maximum. Remember that the graphicbox is sized so that it is only visible in the text portion of the texteditor, so excess line numbers that might be printed are hidden from view.

     'use top row number as starting number for line numbers
     for i = row to row+100
        'using() aligns the numbers for us
         num$=using("####",i)
         #1.g "\";num$
     next

Here is the entire code routine that is activated by the timer to print and synchronize line numbers in the left margin with the lines in the texteditor.

[activateTimer]
    'check the number of the row at the top of the texteditor
     #1.te "!origin? col row"
     'if it is the same as last check, do nothing
     if row = lastRow then wait
    'turn off timer for this routine
     TIMER 0
     'new lastRow is current row, for next check
     lastRow = row
     'delete previously named drawing segment called *linenums*
     #1.g "delsegment linenums"
     'location to start drawing line numbers
     #1.g "place 2 14"
     'fill with default buttonface color to erase previous line numbers
     #1.g "fill buttonface"
     'use top row number as starting number for line numbers
     for i = row to row+100
        'using() aligns the numbers for us
         num$=using("####",i)
         #1.g "\";num$
     next
     'flush and give this segment the name *linenums*
     #1.g "flush linenums"
     'start timer again
     TIMER 50, [activateTimer]
     wait

Eddie's Code